<template>
  <div class="page meetingOverview">
    <van-nav-bar left-arrow @click-left="onClickBack" title="会议室一览" fixed class="my-nav-bar2" />
    <div class="content">
      <div class="card">
        <van-form>
          <van-field readonly clickable name="roomName" :value="formData.roomName" label="会议室选择" placeholder="点击选择会议室"
            @click="showPickerRoom = true" is-link left-icon="tv-o" />
          <van-field readonly clickable name="orderStartTime" :value="formData.orderStartTime" label="开始日期"
            placeholder="点击选择开始日期" @click="showPickerStartDate = true" is-link left-icon="aim" type="date" />


          <van-field readonly clickable name="orderEndTime" :value="formData.orderEndTime" label="结束日期"
            placeholder="点击选择结束日期" @click="showPickerEndDate = true" is-link left-icon="aim" type="date" />
        </van-form>
        <van-popup v-model="showPickerRoom" round position="bottom">
          <van-picker show-toolbar :columns="roomOptions" @cancel="showPickerRoom = false" @confirm="onConfirmRoom"
            :loading="loadingRoom" />
        </van-popup>
        <van-popup v-model="showPickerStartDate" position="bottom">
          <van-datetime-picker type="date" @confirm="onConfirmStartDate" @cancel="showPickerStartDate = false"
            :max-date="new Date(formData.orderEndTime)" />
        </van-popup>
        <van-popup v-model="showPickerEndDate" position="bottom">
          <van-datetime-picker type="date" @confirm="onConfirmEndDate" @cancel="showPickerEndDate = false"
            :min-date="new Date(formData.orderStartTime)" />
        </van-popup>

      </div>
      <div class="card">
        <div class="title">
          <span class="card-title">详细日程</span>
          <van-button type="info" round size="small">数据导出</van-button>
        </div>
        <table class="schedule-table">
          <thead>
            <tr>
              <th class="diagonal-header">
                <div class="header-name">名称</div>
                <div class="header-time">时间</div>
              </th>
              <th>{{ formData.roomName }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in scheduleData" :key="index">
              <td class="date">
                <span>{{ item.orderStartTime ? $dayjs(item.orderStartTime).format('YYYY/MM/DD') : "" }}</span>
                <span>{{ $dayjs(item.orderStartTime).format('A') }}</span>
              </td>
              <td :style="{ backgroundColor: getColor(item.event?.id) }">
                {{ `${index + 1}、${item.meetTitle}(${$dayjs(item.orderStartTime).format('hh:mm')
                }-${$dayjs(item.orderEndTime).format('hh:mm')})` }}
              </td>
            </tr>
          </tbody>
        </table>
        <van-empty description="暂无数据" v-if="!scheduleData.length" />
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: "meetingOverview",
  data() {
    return {
      loading: false,
      loadingRoom: false,
      formData: {
        meetRoomId: null,
        roomName: null,
        orderStartTime: this.$dayjs().format('YYYY-MM-DD'),
        orderEndTime: this.$dayjs().format('YYYY-MM-DD'),
      },
      showPickerRoom: false,
      showPickerStartDate: false,
      showPickerEndDate: false,
      roomOptions: [],
      scheduleData: []
    }
  },
  mounted() {
    this.handGetRoomOptions();
  },
  methods: {
    getList() {
      if (!this.formData.meetRoomId || !this.formData.orderStartTime || !this.formData.orderEndTime) {
        return
      }
      const queryParams = {
        meetRoomId: this.formData.meetRoomId,
        orderStartTime: this.formData.orderStartTime + " 00:00:00",
        orderEndTime: this.formData.orderEndTime + " 23:59:59",
      }
      this.$Toast.loading({ forbidClick: true });
      this.$axios({
        url: `/roomOrder/roomInfoList?${this.$qs.stringify(queryParams)}`,
        method: "get",
      }).then(res => {
        this.scheduleData = res.records
      }).finally(() => {
        this.$Toast.clear(); // 清除加载提示
      });
    },
    handleChange(value) {
      console.log(value, "value");
    },
    // 获取会议室列表
    handGetRoomOptions() {
      this.loadingRoom = true;
      this.$axios({
        url: `/meetingDetail/list?column=createTime&order=desc&pageNo=1&pageSize=100000`,
        method: "get",
      }).then(res => {
        this.roomOptions = res.records.map(item => ({ text: item.roomName, value: item.roomName, ...item })) || [];
      }).finally(() => {
        this.loadingRoom = false;
      });
    },
    onClickBack() {
      this.$router.push('/');
    },
    // 选择会议室
    onConfirmRoom(data) {

      this.showPickerRoom = false;
      this.formData.meetRoomId = data.id;
      this.formData.roomName = data.roomName;
      this.getList();
    },
    // 选择开始时间
    onConfirmStartDate(value) {
      this.showPickerStartDate = false;
      this.formData.orderStartTime = this.$dayjs(value).format('YYYY-MM-DD');
      this.getList();
    },
    // 选择结束时间
    onConfirmEndDate(value) {
      this.showPickerEndDate = false;
      this.formData.orderEndTime = this.$dayjs(value).format('YYYY-MM-DD');
      this.getList();
    },
    // 颜色选择器（可以根据需要调整）
    getColor(id) {
      switch (id) {
        case 1:
          return '#f0e6ff';
        case 2:
          return '#fff8d6';
        default:
          return '#ffffff';
      }
    }
  }
}
</script>
<style scoped lang="less">
.meetingOverview {
  background: linear-gradient(115deg, #F7FAFF 0%, #B8D3FA 85%, #DCE9FD 100%);
  backdrop-filter: blur(0px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 45px;
  overflow: hidden;
  .content{
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: calc(100% - 101px);
    padding: 0 15px 15px;
    overflow: auto;
  }
  .schedule-table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      border: 1px solid #ebebeb;
      padding: 10px;
      text-align: left;
    }

    th {
      height: 26px;
      color: #01124D;
      font-weight: 500
    }

    th.diagonal-header {
      position: relative;
      text-align: center;
      width: 90px;

      .header-name,
      .header-time {
        position: absolute;
      }

      .header-name {
        top: 16px;
        left: 8px;
      }

      .header-time {
        bottom: 18px;
        right: 10px;
      }

      &::after {
        content: '';
        position: absolute;
        top: 22px;
        bottom: -24px;
        left: -9px;
        right: 0px;
        margin: auto;
        border-bottom: 2px solid #ebebeb;
        /* 斜线颜色 */
        width: 108%;
        height: 0px;
        /* 斜线长度 */
        transform: rotate(22deg);
        /* 斜线角度 */
        transform-origin: right top;
        /* 斜线旋转原点 */
      }
    }

    td {
      position: relative;

      div {
        padding: 5px;
        margin-bottom: 5px;
      }
    }

    .date {
      text-align: center;
    }
  }

  .my-nav-bar2 {
    background-color: transparent;
  }

  .card {
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .card-title {
        font-weight: 500;
        font-size: 18px;
        color: #01124D;
      }
    }

    .room-select {
      display: flex;
      justify-content: space-between;
      align-content: center;
      font-size: 14px;
      padding-left: 14px;
    }
  }
}
</style>